<template>
	<view class="container">
		<view class="header">
			<view class="arrow" @tap="$back()">
				<image src="../../../static/images/arrow_left.png" mode="aspectFit"></image>
			</view>
			<view class="tit f36 cfff">物流公司</view>
			<view class="btn" @click="open()">
				<image src="../../../static/images/tb_more.png" mode="aspectFit"></image>
			</view>
		</view>
		
		<view class="logistics">
		
		<uni-swipe-action v-for="(item,index) in arry" :key="index">
		    <uni-swipe-action-item :options="options" @click="onClick(index)" @change="change"  >
		       <view class="item" @click="gologistics(item)">
		       	<view class="name f32 c333">{{item}}</view>
		       </view>
		    </uni-swipe-action-item>
		</uni-swipe-action>
			
		<uni-popup ref="popup" type="center">
			<view class="addContent">
				<view class="box">
					<view class="tit tCenter f36 c333">请输入物流地址</view>
					<view class="input-box"><input type="text" placeholder="最多输入12个字符" v-model="name" /></view>
					<view class="btn f30 tCenter">
						<view class="dropBtn" @click="close">取消</view>
						<view class="submit" @click="tda">确定</view>
					</view>
				</view>
			</view>
		</uni-popup>
			
			
			
		</view>
		
		
	</view>
</template>

<script>
	import uniSwipeAction from '@/components/uni-swipe-action/uni-swipe-action.vue'
	import uniSwipeActionItem from '@/components/uni-swipe-action-item/uni-swipe-action-item.vue'
	export default {
		data() {
			return {
				name:'',
				arry:["顺丰快递","EMS","申通快递","中通快递","韵达快递"],
				 options:[
				       {
				            text: '删除',
				            style: {
				                backgroundColor: '#dd524d'
				            }
				        }
				      ]
			}
		},
		methods: {
			  onClick(e){
			      // console.log('当前点击的是第'+e.index+'个按钮，点击内容是'+e.content.text)
				  // console.log(e);
				  this.arry.splice(e,1)
			    },
			    change(open){
			      // console.log('当前开启状态：'+ open)
			    },
				tda(){
					this.arry.unshift(this.name)
					this.name=''
					this.$refs.popup.close();
				},
				open() {
					this.$refs.popup.open();
				},
				close() {
					this.$refs.popup.close();
				},
				gologistics(item){
					uni.setStorage({
						key:'kuaidi',
						data:item
					})
					uni.navigateTo({
						url:'../../clientservice/logistics'
					})
				}
		}
	}
</script>

<style lang="scss">
	.header {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		background-color: #249AF6;
		padding: 30upx 30upx 10upx 30upx;
	
		.arrow {
			image {
				width: 20upx;
				height: 40upx;
			}
		}
	
		.btn {
			image {
				width: 44upx;
				height: 44px;
			}
		}
	}
	.logistics{
		margin-top: 30upx;
			border-bottom: 1upx #eee solid;
		.item{
			padding: 30upx;
			border-bottom: 1upx #eee solid;
			width: 100%;
			&.active{
				background:rgba(221,221,221,1);
			}

		}
	}
</style>
